<template>
  <view class="content">
    <van-nav-bar :title="navBartitle" left-arrow @click-left="onClickLeft"> </van-nav-bar>
    <!-- <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80"> -->
    <!-- <loading :loadingIsShow="loadingIsShow"></loading> -->
    <view class="main-container">
      <van-sidebar :active-key="activeKey" @change="onChangeSidebar">
        <van-sidebar-item v-for="(item,index) in sidebarList" :key="index" :title="item.cateName" />
      </van-sidebar>

      <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80"
        show-scrollbar="false">
        <view class="sidebar_content">
          <view class="img_banner">
            <!-- <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/sideBar-banner.png" mode="widthFix" /> -->
          </view>
          <view class="goods-box">
            <!-- <view class="goods-box-content" v-for="(item,index) in thirdCategoryList" :key="index" :id="index"> -->
            <!-- <view style="display: flex; justify-content: space-between;align-items: center;">
                  <view class="goods-box-content-title">{{item.cateName}}</view>
                  <van-icon name="arrow" size="12" @click="toListInfo(item.cateName,item.thirdCategoryList)"/>
                </view> -->
            <view class="goods_container">
              <view class="goods_item" v-for="(goodsItem, goodsIndex) in thirdCategoryList" :key="goodsIndex"
                :id="goodsIndex" @click="productListInfo(item.cateName, goodsItem, goodsIndex, item.thirdCategoryList)">
                <img class="goods_icon" :src='goodsItem.imgurl' mode="widthFix" />
                <view class="goods_title">{{ goodsItem.cateName }}</view>
                <view class="goods_subtitle">{{ goodsItem.subtitle }}</view>
                <view class="goods_price">￥{{ goodsItem.price }}</view>
              </view>
            </view>
            <!-- </view> -->
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- <view class="loading" v-if="isLoadAll&&contentData.length >=10" >{{ loadingText }}</view> -->
    <!-- </scroll-view> -->
  </view>
</template>
  
  <script>
  import { topStyleWhite } from '@/utils/topColor'
  
  export default {
      components: {
  
      },
      data () {
          return {
            navBartitle: '洗护养护',
            activeKey:0,
            params:undefined,
            sidebarList: [],
            // goodsList:[
            //   {
              thirdCategoryList:[
                  // {imgurl:require('../../static/shangcheng/dougan.png'),
                  {
                    id:0,
                    pid:284,
                    imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/shoeImg01.png",
                    cateName:'洗运动鞋两双',
                    subtitle:'干净整洁',
                    price:10
                  },
                  {
                    id:1,
                    pid:284,
                    // imgurl:require('../../static/shangcheng/dougan.png'),
                    imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/shoeImg01.png",
                    cateName:'椰子款清洗1双',
                    subtitle:'干净整洁',
                    price:10
                  },
                  {
                    id:2,
                    pid:284,
                    // imgurl:require('../../static/shangcheng/dougan.png'),
                    imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/shoeImg01.png",
                    cateName:'洗运动鞋2双',
                    subtitle:'干净整洁',
                    price:10
                  },
                  {
                    id:3,
                    pid:284,
                    // imgurl:require('../../static/shangcheng/dougan.png'),
                    imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/shoeImg01.png",
                    cateName:'洗运动鞋2双',
                    subtitle:'干净整洁',
                    price:10
                  },
                ]
            //   },
            //   {cateName:'茶咖冲饮',
            //   thirdCategoryList:[
            //       {
            //         id:6,
            //         pid:285,
            //         // imgurl:require('../../static/shangcheng/dougan.png'),
            //         imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
            //         goodsName:'快手早餐'
            //       },
            //       {
            //         id:7,
            //         pid:285,
            //         // imgurl:require('../../static/shangcheng/dougan.png'),
            //         imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
            //         goodsName:'精品茶咖'
            //       },
            //       {
            //         id:8,
            //         pid:285,
            //         imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
            //         goodsName:'出行美食'
            //       },
            //       {
            //         id:9,
            //         pid:285,
            //         imgurl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/dougan.png",
            //         goodsName:'办公补能'
            //       },
            //     ]
            //   }
            // ]



          }
      },
      computed: {
        // filteredData() {
        //   return this.sidebarList.filter(item => !item.cateName.includes('推荐'));
        // }
      },
      onLoad (data) {
         // 取到路由携带的参数
          if (data != null) {
              this.params = JSON.parse(decodeURIComponent(data.params))
              console.log('params', this.params,this.params.currentIndex,typeof(this.params.currentIndex))

              if(this.params.pageSign==='1'){
                this.navBartitle='洗护养护'
                this.sidebarList = [
                    { id: 245, pid: 0, cateName: "洗衣", },
                    { id: 272, pid: 0, cateName: "洗鞋修鞋", },
                    { id: 280, pid: 0, cateName: "家纺清洗", },
                    { id: 281, pid: 0, cateName: "裁缝改衣", },
                  ]
              }else if(this.params.pageSign==='2'){
                this.navBartitle='安装维修'
                this.sidebarList = [
                  { id: 111, pid: 0, cateName: "水电", },
                  { id: 112, pid: 0, cateName: "家电", },
                ]
              }
              this.activeKey=this.params.val
              
          }
      },
      onUnload () {
          if (this.timer) {
              clearTimeout(this.timer)
              this.timer = null
          }
          this.topStyleWhite()
      },
      onReady () {
          this.topStyleWhite()
       
      },
      methods: {
          topStyleWhite () {
              // 手机顶部
              // eslint-disable-next-line no-undef
              wx.setNavigationBarColor({
                  frontColor: '#ffffff',
                  backgroundColor: 'rgba(255, 255, 255, 0)'
              })
          },
          // scrolltolower () {
          //     if (this.totalPage <= this.contentData.length) {
          //         this.isLoadAll = true
          //         this.biaozhi = 0
          //         this.loadingText = '没有更多数据啦~'
          //     } else {
          //         this.abnormalDetailsParamas.pageNum++
          //         this.isLoadAll = true
          //         this.loadingText = '加载中...'
          //         this.biaozhi = 1
          //         this.getAbnormalDetailsMethod()
          //     }
          // },
          onClickLeft () {
              uni.navigateBack()
          },
          // refresherpulling () {
          //     if (!this.isrefresher) {
          //         this.tableInfo = []
          //         this.contentData = []
          //         this.totalPage = 0
          //         this.loadingText = ''
          //         this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
          //         this.abnormalDetailsParamas.pageNum = 1
          //         console.log(this.abnormalDetailsParamas.pageNum, 'pageNum')
          //         const interFace = this.getAbnormalDetailsMethod()
          //         Promise.all([interFace]).then(() => {
          //             // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
          //             this.time = setTimeout(e => {
          //                 this.isrefresher = false
          //             }, 100)
          //         })
          //     }
          // }
          onChangeSidebar(e){
            this.activeKey=e.detail
            console.log(this.activeKey,e,'e sideBar')
            this.sidebarList.forEach((item,index)=>{
            //   if(e.detail===index){
            //     this.goodsList=item.secondCategoryList
            //   }
            })
          },
  
          // 全部
          toListInfo(cateName,itemList){
            console.log(cateName,this.activeKey,itemList,'ToList')
            const params={}
            params.biaoshi='mall'
            params.val=0  //代表点的箭头
            params.cateName=cateName
            params.itemList=itemList
            uni.navigateTo({
              url:
                '/pages/shangcheng/productList?params=' +
                encodeURIComponent(JSON.stringify(params))
            })
          },
          productListInfo(name,ele,val,itemList){
            console.log(name,ele,this.activeKey,val,itemList,'ToproductList')
            const params={}
            params.biaoshi='mall'
            params.val=1  //代表点的三级商品
            params.cateName=name
            params.selectedItem=ele
            params.selectedItemKey=val
            params.itemList=itemList
            
            uni.navigateTo({
              url:
                '/pages/shangcheng/productList?params=' +
                encodeURIComponent(JSON.stringify(params))
            })
          },
  
    
  
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .content {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      height: 100vh;
      overflow: hidden;
      z-index: -2;
      background-color: #ffffff;
      background-size: 100%;
  
  }
  .scroll-content {
    flex: 1;
    // height: 1px;
    height: -1px;
  }
  .main-container {
    overflow: hidden;
    // box-shadow: 0px 4px 10px rgba(61, 92, 153, 0.1);
    height: 100vh;
    display: flex;
    // padding-top: 14px;  //navbar  有一个padding-top:47px    此时 左箭头与右侧胶囊 同高
    padding-top: 3px;
  }
  
  .sidebar_content{
    padding: 0px 12px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(61, 92, 153, 0.1);
    height: 100vh;
    // background-color: pink;
  }
  
  .img_banner{
    margin-top: 20px;  //上边距加20px
    width:100%; 
    img{
      // height:118px;
      // width: 253px;
      width:100%;  //加了mode="widthFix"
    }
  }
  // 商品分类模块
  .goods-box{
  }
  .goods-box-content{
    padding-top:21px ;
  }
  .goods-box-content-title{
    height: 32rpx;
    font-size: 32rpx;
    line-height: 32rpx;
    text-align: left;
    color: #111111;
  }
  .goods_container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 允许Flex项目换行 */
    width: 100%;
    text-align: center;
    margin-top: 12px;
  }
  
  .goods_item{
    width: calc((100% - 33rpx)/2);
    text-align: center;
    margin-bottom: 24rpx;
  }
  .goods_icon {
    width: 240rpx;
    height: 240rpx;
  }
  
  .goods_title {
    font-weight: bolder;
    margin-top: 25rpx;
    font-size: 26rpx;
    color: #111111;
    line-height: 26rpx;
    text-align: left;
  }
  
  .goods_subtitle{
    margin-top: 17rpx;
    font-size: 24rpx;
    color: #888888;
    line-height: 24rpx;
    text-align: left;
  }
  .goods_price{
    margin-top: 18rpx;
    color: #111111;
    font-weight: bolder;
    font-size: 26rpx;
    text-align: left;
    margin-bottom: 24rpx;
  }

  .loading{
    text-align: center;
    /* height: 40px; */
    margin-top: 16px;
    color: #242629;
    font-weight: 400;
    font-size: 14px;
  }
  ::v-deep .van-nav-bar__left{
    width: 56px;
    height: 44px;
  
  }
  ::v-deep .van-icon {
    color: #242629 !important;
  }
  
  ::v-deep .van-nav-bar__title{
      font-size: 14px;
      color: #333333;
      text-align: center;
  }
  ::v-deep .van-empty__image  {
      width: 150px;
      height: 100px;
  
  }
  
  
  // sidebar
  ::v-deep .van-sidebar{
    width:105px !important;
    height: 100vh;
    background-color: #F7F7F7;
  }
  
  // 未选中的样式
  ::v-deep .van-sidebar-item {
    // font-weight: bold;
    font-size: 26rpx;
    line-height: 26rpx;
    text-align: center;
    color: #888888;
    border: none !important;
    background-color: transparent;
  }
  // 选中的样式
  ::v-deep .van-sidebar-item--selected{
    // font-weight: bolder;
    line-height: 32rpx;
    font-size:32rpx;
    text-align: center;
    color: #111111;
    background-color: #ffffff;
  }
  
  </style>
  